<template>
    <a-card :bordered="false">
        <div class="table-page-search-wrapper">
            <a-form layout="inline" ref="queryForm" :form="queryForm">

                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="内部编号，唯一索引，地区编号">
                            <a-input v-decorator="['areaNo',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="地区中文名">
                            <a-input v-decorator="['areaCnName',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <template v-if="advanced">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="地区英文名">
                            <a-input v-decorator="['areaEnName',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="权重排序">
                            <a-input v-decorator="['sortValue',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="父级地区编号，第一级节点则为空字符串">
                            <a-input v-decorator="['parentNo',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="级别">
                            <a-input v-decorator="['layer',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="中文名称全路径，横杠开头，结尾为中文名">
                            <a-input v-decorator="['areaCnNamePath',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="地区编号全路径，横杠开头，结尾为地区编号">
                            <a-input v-decorator="['areaNoPath',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="是否末级地址">
                            <a-input v-decorator="['isLeaf',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="邮政编码">
                            <a-input v-decorator="['postcode',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="地区状态，1显示，0无效">
                            <a-input v-decorator="['isShow',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item label="是否中国 是否中国 1 中国 0=非中国">
                            <a-input v-decorator="['isChina',{ rules: [{ required: false}] }]" />
                        </a-form-item>
                    </a-col>
                    </template>
                    <a-col :md="!advanced && 8 || 24" :sm="24">
                    <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                      <a-button type="primary" @click="handleSearchPmsArea">查询</a-button>
                      <a-button style="margin-left: 8px" @click="handleSearchResetPmsArea">重置</a-button>
                      <a @click="toggleAdvanced" style="margin-left: 8px">
                        {{ advanced ? '收起' : '展开' }}
                        <a-icon :type="advanced ? 'up' : 'down'"/>
                      </a>
                    </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <div class="table-operator">
            <a-button type="primary" v-action:pms_pmsArea_add icon="plus" @click="handleAddPmsArea">新建</a-button>
            <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                    <a-menu-item key="1" v-action:pms_pmsArea_delete @click="handleBatchDeletePmsArea"><a-icon type="delete" />删除</a-menu-item>
                    <!-- lock | unlock -->
                    <a-menu-item key="2"><a-icon type="lock" />扩展</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px">
                    批量操作 <a-icon type="down" />
                </a-button>
            </a-dropdown>
        </div>

        <!-- 列表  -->
        <s-table
                ref="table"
                size="default"
                :columns="columns"
                :data="loadData"
                :alert="{ show: true, clear: true }"
                :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        >
            <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text">
                <div :key="index">
                    <template>{{ text }}</template>
                </div>
            </template>
            <template slot="status" slot-scope="text">
                <div v-if="text==1">启用</div>
                <div v-if="text==0">关闭</div>
            </template>
            <span slot="action" slot-scope="text, record">
        <a @click="handleEditPmsArea(record)">编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">
            更多 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;" @click="handleDetailPmsArea(record)" >详情</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" v-if="record.statusEnable==1" @click="handleDisableStatusPmsArea(record)">关闭</a>
              <a href="javascript:;" v-if="record.statusEnable==0" @click="handleDisableStatusPmsArea(record)">启用</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;" @click="handleDeletePmsArea(record)">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
        </s-table>
        <!--   编辑表单 -->
        <a-modal
                title="操作"
                :width="800"
                v-model="modelVisible"
                :confirmLoading="confirmLoading"
                @ok="handleSaveOrUpdatePmsArea"
        >
            <a-form :form="form">
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="ID"
                        validateStatus="success"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'areaId',{ rules: [{ required: false, message: '自增主键' }] }]"
                            disabled="disabled" />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="内部编号，唯一索引，地区编号"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'areaNo',{ rules: [{ required: false, message: '内部编号，唯一索引，地区编号' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="地区中文名"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'areaCnName',{ rules: [{ required: false, message: '地区中文名' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="地区英文名"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'areaEnName',{ rules: [{ required: false, message: '地区英文名' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="权重排序"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'sortValue',{ rules: [{ required: false, message: '权重排序' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="父级地区编号，第一级节点则为空字符串"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'parentNo',{ rules: [{ required: false, message: '父级地区编号，第一级节点则为空字符串' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="级别"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'layer',{ rules: [{ required: false, message: '级别' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="中文名称全路径，横杠开头，结尾为中文名"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'areaCnNamePath',{ rules: [{ required: false, message: '中文名称全路径，横杠开头，结尾为中文名' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="地区编号全路径，横杠开头，结尾为地区编号"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'areaNoPath',{ rules: [{ required: false, message: '地区编号全路径，横杠开头，结尾为地区编号' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="是否末级地址"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'isLeaf',{ rules: [{ required: false, message: '是否末级地址' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="邮政编码"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'postcode',{ rules: [{ required: false, message: '邮政编码' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="地区状态，1显示，0无效"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'isShow',{ rules: [{ required: false, message: '地区状态，1显示，0无效' }] }]"
                             />
                </a-form-item>
                <a-form-item
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        label="是否中国 是否中国 1 中国 0=非中国"
                        hasFeedback >
                    <a-input
                            v-decorator="[ 'isChina',{ rules: [{ required: false, message: '是否中国 是否中国 1 中国 0=非中国' }] }]"
                             />
                </a-form-item>
                <a-divider />
            </a-form>
        </a-modal>
    </a-card>
</template>

<script>
    import { STable } from '@/components'
    import api from '@/api'
    import { deletePmsArea, updatePmsArea, addPmsArea, batchDeletePmsArea } from '@/api/pmsAreaApi'

    export default {
        name: 'PmsAreaList',
        data () {
        return {
            description: '',
            editModelVisible: false,
            confirmLoading: false,
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            form: this.$form.createForm(this, { name: 'entity_form' }),
            queryForm: this.$form.createForm(this, { name: 'query_form' }),
            editRecord: {},
            // 高级搜索 展开/关闭
            advanced: false,
            // 查询参数
            queryParam: {
            },
            // 表头

        columns: [
                    {
                        title: '内部编号，唯一索引，地区编号',
                        dataIndex: 'areaNo',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '地区中文名',
                        dataIndex: 'areaCnName',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '地区英文名',
                        dataIndex: 'areaEnName',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '权重排序',
                        dataIndex: 'sortValue',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '父级地区编号，第一级节点则为空字符串',
                        dataIndex: 'parentNo',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '级别',
                        dataIndex: 'layer',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '中文名称全路径，横杠开头，结尾为中文名',
                        dataIndex: 'areaCnNamePath',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '地区编号全路径，横杠开头，结尾为地区编号',
                        dataIndex: 'areaNoPath',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '是否末级地址',
                        dataIndex: 'isLeaf',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '邮政编码',
                        dataIndex: 'postcode',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '地区状态，1显示，0无效',
                        dataIndex: 'isShow',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        title: '是否中国 是否中国 1 中国 0=非中国',
                        dataIndex: 'isChina',
                        // width: '100',
                        sorter: false,
                        // scopedSlots: { customRender: '' },
                        needTotal: false
                    },
                    {
                        table: '操作',
                        dataIndex: 'action',
                        width: '150',
                        scopedSlots: { customRender: 'action' }
                    }
            ],
            // 加载数据方法 必须为 Promise 对象
            loadData: parameter => {
                                return this.$http.get(api.pmsAreaUrl, {
                    params: Object.assign(parameter, this.queryParam)
                }).then(res => {
                    return res.data
                })
            },
            selectedRowKeys: [],
            selectedRows: []
        }
        },
        components: {
            STable
        },
         methods: {
             // 搜索查询
             handleSearchPmsArea () {
                 this.queryParam = this.queryForm.getFieldsValue()
                 this.loadData = parameter => {
                     return this.$http.get(api.pmsAreaUrl, {
                     params: Object.assign(parameter, this.queryParam)
                     }).then(res => {
                     return res.data
                     })
                 }
                 this.$refs.table.refresh()
             },
             // 搜索重置
             handleSearchResetPmsArea () {
                 this.queryForm.resetFields()
             },
             handleChangePmsArea (value, key, column, record) {
                 record[column.dataIndex] = value
             },
             handleEditPmsArea (record) {
                 this.editRecord = Object.assign({}, record)
                 this.modelVisible = true
                 this.$nextTick(() => {
                     let values = this.form.getFieldsValue()
                     for(let key in values) {
                     values[key] = this.editRecord[key];
                     this.form.setFieldsValue(values)
                 }
             })
             },
             // 新增
             handleAddPmsArea () {
                 this.editRecord = {}
                 this.modelVisible = true
                 this.form.resetFields();
             },
             // 批量删除
             handleBatchDeletePmsArea () {
                 // console.log('===============handleBatchDelete', this.selectedRowKeys)
                 // console.log('===============handleBatchDelete', this.selectedRowKeys[0])
                 let ids = this.selectedRowKeys
                 let params = this.selectedRowKeys
                 const that = this
                 this.$confirm({
                     title: '警告',
                     content: `真的要批量删除 ${ids.length} 个吗?`,
                     okText: '删除',
                     okType: 'danger',
                     cancelText: '取消',
                     onOk () {
                         // 在这里调用删除接口
                         return new Promise((resolve, reject) => {
                             batchDeletePmsArea(params)
                             .then(res => {
                                 that.$refs.table.clearSelected()
                                         that.$refs.table.refresh()
                                         that.$notification['success']({
                                             message: '提示',
                                             description: res.msg || '删除成功',
                                             duration: 8
                                         })
                                 resolve()
                             }).catch((err) => {
                             reject(err)
                             that.$notification['error']({
                                 message: '提示',
                                 description: err.msg || '删除失败',
                                 duration: 8
                             })
                         })
                     }).catch(() => console.log('Oops errors!'))
                     },
                     onCancel () {
                         console.log('Cancel')
                     }
                 })
             },
             edit (row) {
                 row.editable = true
                 // row = Object.assign({}, row)
             },
             // eslint-disable-next-line
             handleDeletePmsArea (row) {
                 const that = this
                 this.$confirm({
                     title: '警告',
                     content: `真的要删除吗?`,
                     okText: '删除',
                     okType: 'danger',
                     cancelText: '取消',
                     onOk () {
                         // 在这里调用删除接口
                         return new Promise((resolve, reject) => {
                             deletePmsArea(row.areaId)
                     .then(res => {
                             that.$refs.table.refresh()
                                     that.$notification['success']({
                                         message: '提示',
                                         description: res.msg || '删除成功',
                                         duration: 8
                                     })
                             resolve()
                         }).catch((err) => {
                             reject(err)
                             that.$notification['error']({
                                 message: '提示',
                                 description: err.msg || '删除失败',
                                 duration: 8
                             })
                         })
                     }).catch(() => console.log('Oops errors!'))
                     },
                     onCancel () {
                         console.log('Cancel')
                     }
                 })
             },
             handleDetailPmsArea (row) {
                 // console.log('============ handleDetail')
             },
             handleDisableStatusPmsArea (row) {
                 const that = this
                 let txt = row.statusEnable === 1 ? '关闭' : '启用'
                 this.$confirm({
                     title: '警告',
                     content: `真的要${txt}吗?`,
                     okText: txt,
                     okType: 'danger',
                     cancelText: '取消',
                     onOk () {
                         // 在这里调用更新接口
                         return new Promise((resolve, reject) => {
                             let params = { 'areaId': row.areaId,
                                 'statusEnable': row.statusEnable === 1 ? 0 : 1 }
                             updatePmsArea(row.areaId, params)
                     .then(res => {
                             that.$refs.table.refresh()
                                     that.$notification['success']({
                                         message: '提示',
                                         description: res.msg || '操作成功',
                                         duration: 8
                                     })
                             resolve()
                         }).catch((err) => {
                             reject(err)
                             that.$notification['error']({
                                 message: '提示',
                                 description: err.msg || '操作失败',
                                 duration: 8
                             })
                         })
                     }).catch(() => console.log('Oops errors!'))
                     },
                     onCancel () {
                         console.log('Cancel')
                     }
                 })
             },
             // 更新、保存
             handleSaveOrUpdatePmsArea () {
                 console.log('model data', this.editRecord)
                 // this.confirmLoading = true;
                 this.form.validateFields((err, values) => {
                     if (err) {
                         // this.confirmLoading = false;
                         return;
                     }
                     console.log('Received values of form: ', values);
                 this.editRecord = values
                 this.confirmLoading = true;
                 if (this.editRecord.areaId) {
                     // 更新操作
                     updatePmsArea(this.editRecord.areaId, this.editRecord)
                             .then(res => {
                         this.$notification['success']({
                             message: '提示',
                             description: res.msg || '操作成功',
                             duration: 8
                         })
                         this.form.resetFields();
                     this.modelVisible = false;
                     this.confirmLoading = false;
                     this.$refs.table.refresh()
                 })
                 .catch((err) => {
                         this.confirmLoading = false;
                     this.$notification['error']({
                         message: '提示',
                         description: err.msg || '操作失败',
                         duration: 8
                     })
                 })
                 }else {
                     // 新增操作
                     addPmsArea(this.editRecord)
                             .then(res => {
                         this.$notification['success']({
                             message: '提示',
                             description: res.msg || '操作成功',
                             duration: 8
                         })
                         this.form.resetFields();
                     this.modelVisible = false;
                     this.confirmLoading = false;
                     this.$refs.table.refresh()
                 })
                 .catch((err) => {
                         this.confirmLoading = false;
                     this.$notification['error']({
                         message: '提示',
                         description: err.msg || '操作失败',
                         duration: 8
                     })
                 })
                 }
             });
             },
             onSelectChange (selectedRowKeys, selectedRows) {
                 this.selectedRowKeys = selectedRowKeys
                 this.selectedRows = selectedRows
             },
             toggleAdvanced () {
                 this.advanced = !this.advanced
             }
         }
     }
 </script>

 <style lang="less" scoped>
     .search {
         margin-bottom: 54px;
     }

     .fold {
         width: calc(100% - 216px);
         display: inline-block
     }

     .operator {
         margin-bottom: 18px;
     }

     @media screen and (max-width: 900px) {
         .fold {
             width: 100%;
         }
     }
 </style>
